<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.1.min.js"></script>
    <style>
        .ulcls{
            font-size: 20px;
        }
        /*ul>li:last-child{*/
            /*color: aquamarine;*/
        /*}*/
    </style>
</head>
<body>
<ul id="ulall">
    <li name = "name1">床前明月光</li>
    <li name = "name2">疑是地上霜</li>
    <li name = "name3">举头望明月</li>
    <li name = "name4">低头思故乡</li>
</ul>

<script>
    $(function () {
        //CSS选择器    基本选择器   id  class 标签
        $("ul").hide();
        $("ul").show();
        //$("li").css("list-style","none");
        $("ul").css({
            "list-style":"none",
            "color":"red"
        });
        $("li").addClass("ulcls");
        let li = $("ul>li:last-child");
        nodes = document.getElementById("ulall").lastElementChild;
        console.log(li);//s.n  jquery
        console.log(nodes);//dom
        //dom对象和jQuery对象 相互转换
        // dom对象转jQuery对象
        //$(nodes).css("color","black");
        //jQuery对象转dom对象
        li[0].style.color = "green";
        $("ul>li").click(function () {
            //javascript 写法
            // console.log(this);
            // let name = this.getAttribute("name");
            // alert(name);

            let name = $(this).attr("name");
            alert(name);
        })
    })
</script>
</body>
</html>